Javascript or flash to rotate top stories

Events happening in the community are now at Drupal community events on www.drupal.org.
freatida's picture
Posted by freatida on January 23, 2009 at 8:21am

Hello
I'm looking for a way to rotate 4 top stories (image, node title and teaser text) on the front page of a newspaper I'm developing using Drupal 5. I've looked at two javascript-based modules: views rotator and views carousel. I like the idea of using views because the site admin can manage the top stories using a nodequeue, and I can also select which fields to display, but both modules lack features. The display is jumpy and I'd like controls like being able to pause and play the rotation. I'm wondering whether I should look at something flash-based. I've done a search but haven't yet found any flash modules that do this kind of thing. Does anyone have any ideas for me?
Thanks.

Categories:

Comments

Want to Rotate image, node title, teaser text

Posted by zeal on January 23, 2009 at 1:42pm
zeal's picture

Hello everybody,

I also want to implement functionality like freatida........

Can anybody knows such module or funtionality..
Thanks.

Drupal Rocks! --zeal

Drupal Rocks! --zeal

try Views Slideshow

Posted by sk_mamp_nb on January 24, 2009 at 4:17am
sk_mamp_nb's picture

Views Slideshow is fantastic for what you are looking for freatida.

There's an excellent screencast on it at: http://www.drupaltherapy.com/node/70

Thanks

Posted by zeal on January 24, 2009 at 5:36am
zeal's picture

Hi, Thank you very much sk_mamp_nb !

View slideshow is useful for me.

Drupal Rocks! --zeal

Drupal Rocks! --zeal

Hi thanks for your

Posted by freatida on January 26, 2009 at 8:36am
freatida's picture

Hi thanks for your answers.
sk_mamp_nb - I've had a quick look at views slideshow but can't tell whether it's possible to implement controls - play, pause, previous, next. I see that you can pause by hovering but I need more explicit controls. Do you know if it can do this?
Also, is fade the only effect it uses?

What do people think about using javascript rather than flash? I've always preferred javascript as the more accessible option, but in this case I'm wondering whether flash might not look better. jcarousel on firefox looks really jumpy for me. What do you think?

JQuery Cycle

Posted by paulcouture on January 26, 2009 at 12:06pm
paulcouture's picture

I use the jQuery Cycle plugin for slideshows - it is incredibly easy to implement and degrades nicely.

I'd recommend you check that out.

http://malsup.com/jquery/cycle/

--
"If you are thinking, you are winning. Resistance is victory."

--
"If you are thinking, you are winning. Resistance is victory."

Jquery Cycle plugin is just what I'm looking for, except...

Posted by freatida on January 27, 2009 at 3:24pm
freatida's picture

Thanks paulcouture, the Cycle plugin does just what I'm looking for and I've worked out how to implement it with a view. Only problem I'm having is that while the page loads, all the nodes in the slideshow are displayed underneath each other and the slideshow only appears as it should once the page is fully loaded. Do you have this problem? Any fix?

could you please explains the steps..

Posted by sk_mamp_nb on January 27, 2009 at 8:05pm
sk_mamp_nb's picture

Hi freatida,
Nice to know that you got it working.
Could you please briefly explain the steps involved in implementing this plugin.
I have seen the code/css but can't figure out where to put what and how does a view pick this up.
Many thanks

Here's what I did

Posted by freatida on January 27, 2009 at 10:13pm
freatida's picture

Using Drupal 5 and a Zen subtheme:

  • Downloaded the plugin, put the file "jquery.cycle.all.min.js" in my subtheme directory
  • Created a list view and used the theme wizard to generate code necessary to theme the view
  • Pasted the code in the right files (template.php, views-list-MYVIEW.tpl.php and views-list-MYVIEW.css)
  • Adapted code generated by theme wizard for zen subtheme, as documented here: http://drupal.org/node/220111
  • Gave an id to the ul containing the items in my list view. This, so that I could invoke the Cycle method on the ul container. Did this by changing the last line of the code the theme wizard generated for the template.php file:

Changed

if ($items) {
    return theme('item_list', $items);
  }

to
if ($items) {
    return theme('item_list', $items, NULL, 'ul', array('id' => 'MYVIEW-CYCLE'));
  }

- In template.php, added link to js file:
drupal_add_js(drupal_get_path('theme', 'MYSUBTHEME') .'/jquery.cycle.all.min.js', 'theme');
  • In template.php, pasted following code to call the plugin on my view. In my case I used the pager example (http://malsup.com/jquery/cycle/pager.html):
    drupal_add_js(<<<ENDOFJS
    $(document).ready(function() {
              $("#MYVIEW-CYCLE").before("<div id='nav'>").cycle({
        fx:     "scrollUp",
        timeout: 6000,
        delay:  -2000 ,
        pager:  "#nav"
    })
    })
    ENDOFJS
    , 'inline'
    );

Hope that helps!

thank you!

Posted by sk_mamp_nb on January 27, 2009 at 11:07pm
sk_mamp_nb's picture

I'll try that.

I'm also using a sub theme of Zen but I am on Drupal 6 which I think has a slight difference in that the jQuery plugin is centrally available to all the modules. Apart from that rest of it should be common.

Many thanks.

Only problem I'm having is

Posted by yhager on January 29, 2009 at 6:58pm
yhager's picture

Only problem I'm having is that while the page loads, all the nodes in the slideshow are displayed underneath each other
and the slideshow only appears as it should once the page is fully loaded. Do you have this problem? Any fix?

It doesn't happen if you put the <script> tag right after the divs you want to cycle. I recommend cycle plugin too, used it a few times myself.

If you look at...

Posted by paulcouture on January 27, 2009 at 3:55pm
paulcouture's picture

If you look at the advanced examples on their site, you will find an example on how to pull the content in via ajax - that can be adapted to pull in from a hidden div.

I've done it both ways.

--
"If you are thinking, you are winning. Resistance is victory."

--
"If you are thinking, you are winning. Resistance is victory."

Thanks

Posted by freatida on January 29, 2009 at 8:02pm
freatida's picture

Solved the problem by setting fixed width and height for the container element and overflow:hidden so the other nodes are hidden while page loads.

about moving text and images

Posted by ashiwebi on January 30, 2009 at 11:44am
ashiwebi's picture

Please see the url

http://drupal.org/project/jcarousel

Also see the url

http://sorgalla.com/jcarousel/

for more details.

Newspapers on Drupal

Group organizers

Group categories

Topics - Newspaper on Drupal

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: